<!--
 * @Date: 2023-04-10 23:55:59
 * @LastEditTime: 2023-05-30 15:37:13
 * @FilePath: /wkw/src/views/bioassay/index.vue
 * 介绍:
-->
<route lang="json">
{
  "meta": {
    "title": "t('huo-ti-jian-ce')"
  }
}
</route>
<script lang="ts" setup>
import { apiGetSessionId, apiGetBioassay } from "@@/api/module/bioassay";
import useSysStore from "@@/store/useSysStore";
import { _require } from "@@/utils/tools";
import router from "@@router";
import useUserinfoStore from "@@/store/useUserinfoStore";
import { toast, notify } from "@@/hooks/vantHooks";
import { showDialog } from "vant";

const sysStore = useSysStore();
const { setting } = storeToRefs(sysStore);

const bioassayRef = ref<HTMLIFrameElement>();
interface IframeWindow extends Window {
  setLanguage: (key: string) => void;
  setSessionId: (key: string) => void;
}
let iframeWindow: IframeWindow | undefined;
const loading = ref(true);

let session_id = "";
getSessionId();
async function getSessionId() {
  const res = await apiGetSessionId();
  if (!res) {
    router.back();
    notify.error(t("chuang-jian-hui-hua-shi-bai-qing-chong-shi"));
    return;
  }
  session_id = res.session_id;
  setBioassay();
}
function setBioassay() {
  //react那边没写好，这两个设置不能同时调用
  iframeWindow?.setLanguage(setting.value.language);
  setTimeout(() => {
    iframeWindow?.setSessionId(session_id);
  }, 500);
}

onMounted(() => {
  const iframe = bioassayRef.value;
  if (!iframe) return;
  iframe.onload = async () => {
    iframeWindow = iframe.contentWindow as IframeWindow;
    loading.value = false;
    window.bioassayEnd = bioassayEnd;
    setBioassay();
  };
});
const { t } = useI18n();

watch(
  () => setting.value.language,
  (newValue) => {
    iframeWindow?.setLanguage(newValue);
  },
  {
    immediate: true,
    deep: true,
  }
);

const userinfoStore = useUserinfoStore();
async function bioassayEnd(session_id?: string) {
  toast.loading();
  const res = await apiGetBioassay({
    session_id: session_id!,
  });
  toast.close();
  router.go(-2);
  setTimeout(() => {
    if (!res.status) {
      return showDialog({
        title: t("shi-bai"),
        message: res.msg,
        showCancelButton: false,
      });
    }
    showDialog({
      title: t("cheng-gong"),
      message: res.msg,
      showCancelButton: false,
    });
    userinfoStore.getUserinfo();
  }, 500);
}
</script>
<template>
  <CpageView class="bioassay">
    <!-- <van-loading class="van-loading" v-if="loading" vertical>
      {{ $t("jia-zai-huo-ti-jian-ce-zu-jian") }}
    </van-loading> -->
    <van-skeleton :loading="loading" class="MT-md B-B1" style="display: block">
      <template #template>
        <van-skeleton-paragraph row-width="60%" />
        <van-skeleton-paragraph />
        <van-skeleton-paragraph style="height: 300rem" />
        <Cgrid class="MT-md" col="1fr 1fr 60rem">
          <VanSkeletonImage style="height: 350rem" />
          <VanSkeletonImage style="height: 350rem" />
        </Cgrid>
        <van-skeleton-paragraph v-for="a in 4" />
        <div class="flex-J-C MT-md">
          <van-skeleton-paragraph style="height: 75rem" row-width="60%" />
        </div>
      </template>
    </van-skeleton>
    <iframe ref="bioassayRef" class="iframe" src="/bioassay/index.html">
    </iframe>
  </CpageView>
</template>
<style lang="scss" scoped>
.bioassay {
  padding: 0;
  .iframe {
    width: 100%;
    height: var(--page-H);
  }
}
.van-loading {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
</style>
